<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Music Engine Player</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="./css/ui.all.css" media="all" />
    <!--<script type="text/javascript" src="./lib/jquery-1.2.6.js"></script>-->
    <script type="text/javascript" src="./lib/jquery-1.3.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui-personalized-1.6rc4.js"></script>
    <script type="text/javascript" src="./lib/swfobject.js"></script>
    <script type="text/javascript" src="./lib/Song.js"></script>
    <script type="text/javascript" src="./lib/Playlist.js"></script>
    <script type="text/javascript" src="./lib/Searcher.js"></script>
    <script type="text/javascript" src="./lib/Player.js"></script>
    <script type="text/javascript" src="./js/App.js"></script>
    <script type="text/javascript">
        // When the DOM is ready
        jQuery(function($) {
            var app = new App();

            displayPlayer();

            titleDraggable();

            windowResizable();

            function displayPlayer() {
                var mePlayer = $('#me-player');
                var meContent = [];
                meContent.push('<div id="me-player-content" class="ui-widget">')
                    meContent.push('<ul>');
                        meContent.push('<li><a href="#me-player-player">Playing</a></li>');
                        meContent.push('<li><a href="#me-player-library">Library</a></li>');
                    meContent.push('</ul>');
                    meContent.push('<div id="me-player-player">hgoe goheohg')
                    meContent.push('</div>')
                    meContent.push('<div id="me-player-library">hgoehg');
                    meContent.push('</div>');
                meContent.push('</div>');
                mePlayer.html(meContent.join(''));
                var options = {
                };
                $('#me-player-content').tabs(options);
                //$('#me-player-content').css('height',  App.settings.window.CURRENT_HEIGHT - 10 + 'px');
            }

            function titleDraggable() {
                var options = {
                    handle: '#me-title'
                };
                $('#music-engine').draggable(options);
            }

            function windowResizable() {
                var options = {
                  animate: true,
                  maxHeight: App.settings.window.MAX_HEIGHT,
                  maxWidth: App.settings.window.MAX_WIDTH,
                  minHeight: App.settings.window.MIN_HEIGHT,
                  minWidth: App.settings.window.MIN_WIDTH,
                  start: windowResizeStart,
                  resize: windowResize,
                  stop: windowResizeStop,
                  ghost: true
                };

                $('#' + App.settings.window.WINDOW_ID).resizable(options);

                function windowResizeStart(event, ui) {

                }

                function windowResize(event, ui) {

                }

                function windowResizeStop(event, ui) {
                    
                }
            }
        });

    </script>
  </head>
  <body>
  <div id="music-engine" class="ui-widget ui-widget-content ui-corner-all">
      <div id="me-title" class="ui-widget-header">
        <span id="title-name">Music Engine Player (1.0-alpha)</span>
      </div>
      <div id="me-content">
          <div id="tool-bar"></div>
          <div id="me-player"></div>
      </div>
      <div id="progress-bar"></div>
  </div>
  </body>
</html>
